<template>
	<div>
		<div class="news_lie">
			<div class="pb_hader">
				<p>
					<span class="lt_span">{{productname}}</span>
					<a class="rg_a"><span>首页</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>案例展示</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="rg_sp">{{productname}}</span></a>
				</p>
			</div>
			<div class="product">
				<ul>
					<li v-for="(item,index) in productlist" :key="index">
						<img class="bg_imgs" :src="item.product_img"/>
						<div class="ouls">
							<span class="ouls_title">{{item.product_title}}</span>
							<p class="kuai"></p>
							<span class="ouls_nr">{{item.product_nr}}</span>
							<button>查看详情</button>
						</div>
					</li>
				</ul>
				<el-pagination 
				  background
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="querytInfo.pagenum"
				  layout="prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				productname:'污水设备',
				productlist:[{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				},{
					product_img:require('../../assets/images/cp_ok.png'),
					product_title:'渗透技术处理水和废水',
					product_nr:'膜分离技术由于出水水质高、设备简单易操作、能耗相对较低、适应性强等特点在水处理领域获得越来越多的关注.目前应用于水处',
				}],
				
				productnamelist:['污水设备','废水处理','废气净化','噪音处理'],
				
				querytInfo: {
				  query: '',
				  // 当前页数
				  pagenum: 1,
				  // 总条数
				  pagesize: 2
				},
				total: 8,
				productid: ''
			}
		},
		mounted() {
			this.productid = this.$route.params.id
		},
		methods: {
			// 监听psgesize 改变
			handleSizeChange(newsize) {
				// console.log(newsize);
				this.querytInfo.pagesize = newsize
			},
			// 监听 页码值 改变
			handleCurrentChange(newpage) {
				// console.log(newpage);
				this.querytInfo.pagenum = newpage
			},
		},
		// 监听路由变化，操作数据更新
		watch: {
			$route(to, from) {
				this.productid = this.$route.params.id
				this.productname = this.productnamelist[this.productid-1]
				// this.$HTTP.get('', {
				// 	params: ''
				// })
				// .then((res) => {
				// 	// this.newslist = res
				// 	// this.total = res.total
				// })
				// .catch((error) => {
				// 	console.log(error)
				// })
			}
		}
	}
</script>

<style scoped>
	.news_lie {
		width: 100%;
		height: auto;
		border: 1px solid #EEEEEE;
		float: left;
		box-sizing: border-box;
	}

	.pb_hader {
		width: 100%;
		height: auto;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: none;
		background: #fff;
	}

	.pb_hader p {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}

	.pb_hader p .lt_span {
		border-left: 4px solid #0069b1;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		padding: 0 12px;
		color: #1f2f3a;
	}

	.pb_hader p .rg_a {
		display: inline-block;
		float: right;
		font-size: 14px;
		color: #b3b2b2;
		margin-left: 5px;
	}

	.pb_hader p .rg_a .rg_sp {
		color: #7c7c7c;
	}

	.pb_center {
		width: 100%;
		height: auto;
	}
	
	.product {
	    width: 100%;
	    height: auto;
	    float: left;
	    padding: 20px 20px;
	    box-sizing: border-box;
	}
	.product ul li{
		width: 32%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		float: left;
		margin-right: 2%;
		margin-bottom: 2%;
		position: relative;
	}
	.product ul li:nth-child(3n){
		margin-right: 0;
	}
	.product ul li .bg_imgs{
		width: 100%;
		height: auto;
	}
	.product ul li .ouls{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 242px;
		height: 228px;
		background-color: #fff;
		transform: translate(-50%, -50%);
		padding:15px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		display: none;
	}
	.product ul li:hover .ouls{
		display: flex;
		animation: 1s opacity 0s normal;
		-webkit-animation: 1s opacity 0s normal;
		-moz-animation: 1s opacity 0s normal;
	}
	@keyframes opacity{
		0%{opacity:0}
		100%{opacity:1;}
	}
	.ouls .ouls_title{
		width: 100%;
		white-space: nowrap;
		font-size: 18px;
		color: #7a7a7a;
		line-height: 30px;
		text-align: center;
		display: inline-block;
	}
	.ouls .kuai {
	    display: inline-block;
	    width: 15px;
	    height: 3px;
	    background-color: #cad7df;
	    margin: 8px 0;
		display: inline-block;
	}
	.ouls .ouls_nr {
		width: 100%;
	    font-size: 12px;
	    color: #a0a0a0;
	    line-height: 18px;
	}
	.ouls button {
	    width: 140px;
	    height: 30px;
		border:0;
	    display: inline-block;
	    background-color: #0069b1;
	    color: #fff;
	    line-height: 30px;
	    text-align: center;
	    font-size: 14px;
	    margin-top: 20px;
		cursor: pointer;
	}
	
	.el-pagination{
		width: 100%;
		margin-top:20px;
		text-align: center;
		float: left;
	}
</style>
